<script setup lang="ts">
import PowerOff from '@/components/power-off.vue'
import { localCache } from '@/util/cache.ts'

import { useRouter } from 'vue-router'
// import router from '@/router'

// 定义接收来自父组件的传值
defineProps({
  isClose: {
    type: Boolean,
    default: false
  }
})

// 获取路由菜单
const userMenus = localCache.getCache('userMenus')

// 监听Item的点击
const router = useRouter()
function handleItemClick(subitem: any) {
  const path = subitem.path
  router.push(path)
}




</script>

<template>
<div class="aside">
  <!--  logo 展示 -->
  <div class="logo">
    <img src="@/assets/img/logo.png" class="img" alt="logo"/>
    <h2 v-show="!isClose" class="title">测试运维平台</h2>
  </div>
  <!-- 菜单展示 -->
  <div class="menu">
    <el-menu
      default-active="1"
      :collapse="isClose"
      text-color="#b7bdc3"
      active-text-color="#fff"
      background-color="#001529"
    >
      <div class="home-menu">
        <el-menu-item  index="home">
          <template  #default>
            <el-icon>
              <el-icon><House /></el-icon>
              <span>系统首页</span>
            </el-icon>
          </template>
        </el-menu-item>
      </div>
      <!--  遍历菜单    -->
      <template v-for="item in userMenus" :key="item.id">
        <el-sub-menu :index="item.id + ''" >
          <template #title>
            <el-icon>
              <component :is="item.icon.split('icon-')[1]"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-for="sub in item.sub_menus" :key="sub.id">
            <el-menu-item :index="sub.id + ''" @click="handleItemClick(sub)">
              {{ sub.name }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
  <div class="poweroff">
    <PowerOff :isReduce="isClose" />
  </div>
</div>
</template>

<style scoped>
.aside {
  height: 100%;
  background-color: rgba(10, 27, 44, 0.98);
}
.logo {
  display: flex;
  height: 28px;
  padding: 12px 10px 8px 10px;
  fex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  .img {
    height: 100%;
    margin: 0 10px;
  }
  .title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
  }
}

.el-menu {
  border-right: none;
  user-select: none;
}

.el-sub-menu {
  .el-menu-item{
    padding-left: 50px !important;
    background-color: rgba(10, 27, 44, 0.98);
  }
  .el-menu-item:hover {
    color: #fff;
  }
  .el-menu-item.is-active {
    background-color: #0a60bd;
  }
}

.home-menu {
  .el-menu-item{
    padding-left: 58px !important;
    background-color: rgba(10, 27, 44, 0.98);
  }
  .el-menu-item:hover {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: #0a60bd;
  }
}

</style>
